<template>
  <div class="common-upload">
    <div class="content_row" v-show="paramsVisible">
      <div class="content-name">选择文件类型：</div>
      <a-select :default-value="fileTypeDefault" style="width: 100%;" placeholder="选择文件类型"  @change="handleChange" v-model="fileTypeData">
        <a-select-option v-for="(item,index) in fileType" :key="index" :value="item.name">
          {{item.displayName}}
        </a-select-option>
      </a-select>
    </div>
    <div class="content_row" v-show="paramsVisible">
      <div class="content-name">文件存放位置：</div>
      <!-- change-on-select  -->
      <a-cascader class="aCascader" :treeDefaultExpandAll='true' :default-value="fileAddressDefault" :options="fileAddress" style="width: 100%" placeholder="" :fieldNames="fieldNames" @change="fileAddressOnChange" v-model="fileAddressData">
        <img src="../../assets/todo/wenjianjia.svg" slot="suffixIcon" class="test" />
      </a-cascader>
    </div>
      <!-- c:customRequest="handleUpload"
      @change="upLoadHandleChange" -->
    <a-upload-dragger
      name="file"
      :multiple="multiple"
      action="#"
      class="upload-dragger"
      :beforeUpload="beforeUpload"
      :loading="uploading"
      :fileList="fileList"
      :remove="handleRemove"
    >
      <p class="ant-upload-drag-icon">
        <!-- <img src="../../assets/todo/shangyi.svg" /> -->
        <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="52px" height="43px" xmlns="http://www.w3.org/2000/svg">
          <g transform="matrix(1 0 0 1 -477 -155 )">
            <path d="M 35 27.0453855140187  L 26.0115506655657 18  L 17 27.0453271028037  L 19.6267606542151 29.688726635514  L 24.1426065421529 25.1443341121495  C 24.1426065421529 25.1443341121495  24.1426065421529 41.1305490654206  24.1426065421529 41.1305490654206  C 24.1426065421529 42.1633177570094  24.9741964193581 43  26 43  C 27.0260357548241 43  27.8573934578471 42.1629672897196  27.8573934578471 41.1304906542056  C 27.8573934578471 41.1304906542056  27.8573934578471 25.1443341121495  27.8573934578471 25.1443341121495  L 32.3732393457849 29.688785046729  L 35 27.0453855140187  Z M 52 23.1236559139785  C 52 17.5710806451613  47.5828437500004 13.0698924731183  42.1339285714284 13.0698924731183  C 40.6353303571432 5.6211182795699  34.1944687499999 0  26.4642857142853 0  C 20.9659821428568 0  16.1195937499997 2.84367741935483  13.263830357143 7.16644086021505  C 13.0991830357143 7.15999462365592  12.9340133928572 7.15591397849462  12.7678571428569 7.15591397849462  C 5.71640178571397 7.15591397849462  0 12.9810053763441  0 20.1666666666667  C 0 27.3523279569892  5.71640178571397 33  12.7678571428569 33  C 13.8515580357143 33  14.8571428571431 32.1527043010753  14.8571428571431 31.1075268817204  C 14.8571428571431 30.0920967741936  13.7820892857144 29.2636666666667  12.796875 29.2173010752688  C 7.76773214285731 29.2150537634409  3.71428571428532 25.2619139784946  3.71428571428532 20.1666666666667  C 3.71428571428532 15.5504516129032  7.04135714285712 11.7261182795699  11.385214285714 11.0478440860215  C 12.4486607142853 10.9704301075269  15.2633928571431 11.2958172043011  15.2633928571431 11.2958172043011  C 15.2633928571431 11.2958172043011  15.8628437500001 10.1001290322581  16.2209241071432 9.49199462365591  C 16.7432455357139 8.60489784946236  17.3236026785717 8.04306989247311  17.3236026785717 8.04306989247311  C 19.5446874999998 5.41761827956989  22.8172633928571 3.78494623655914  26.4642857142853 3.78494623655914  C 32.3898482142858 3.78494623655914  37.3268883928567 8.09452150537635  38.4237053571433 13.8054731182796  C 38.4109955357144 13.8107365591398  38.6307767857143 16.9387580645161  38.6307767857143 16.9387580645161  C 38.6307767857143 16.9387580645161  42.350401785714 16.907  42.3522589285712 16.8592150537634  C 45.6486294642855 16.9764301075269  48.2857142857147 19.7360107526882  48.2857142857147 23.1236559139785  C 48.2857142857147 26.5066290322581  45.6559999999999 29.086247311828  42.3660714285716 29.2150537634409  C 42.3660714285716 29.2150537634409  36.0982142857147 29.2150537634409  36.0982142857147 29.2150537634409  L 36.0982142857147 33  C 36.0982142857147 33  43.0044642857147 33  43.0044642857147 33  C 48.0455044642858 32.6888655913978  52 28.3772204301075  52 23.1236559139785  Z " fill-rule="nonzero" :fill="primaryColor" stroke="none" transform="matrix(1 0 0 1 477 155 )" />
          </g>
        </svg>
      </p>
      <p class="ant-upload-text">
        点击或将文件拖拽到这里上传
      </p>
      <p class="ant-upload-hint">
        支持扩展名：{{supportTypes.join(' ')}}
      </p>
    </a-upload-dragger>
    <!-- <div class="box-btn">
      <a-button>取消</a-button>
      <a-button type="primary" @click="handleUpload">确认</a-button>
    </div>  -->
  </div>
</template>
<script>
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
import { getFolderTree, getSubTypes } from'@/api/projectPlan.js'
const supportTypesData = {
  '.xls': 'application/vnd.ms-excel',
  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  '.txt': 'text/plain',
  '.bmp': 'image/bmp',
  '.doc': 'application/msword',
  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  // '.zip': 'application/x-zip-compressed',
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.pdf': 'application/pdf',
  '.ppt': 'application/vnd.ms-powerpoint',
  '.pptx':'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  '.stp': 'application/vnd.ms-pki.stl'
}
// /deliver/Windchill/servlet/rest/hzero/pdm/folder/getFolderTree  文件存放位置
// /project/Windchill/servlet/rest/hzero/pdm/attribute/getSubTypes 文件类型
export default {
  props: {
    // 是否显示文件类型，文件地址参数
    paramsVisible: {
      type: Boolean,
      default: true
    },
    // 多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 支持上传的文件类型 ['.xls', '.xlsx'] 默认支持supportTypesData中所有类型
    supportTypes: {
      type: Array,
      default: function() {
        return Object.keys(supportTypesData)
      }
    },
    oid: {
      type: String,
      default: ''
    },
    fileTypeDefault: {
      type: String,
      default: ''
    },
    fileAddressDefault: {
      type: [Array,String],
    }
  },
  watch: {
    fileAddressDefault (val) {
      this.fileAddressData = val
    },
    fileTypeDefault (val) {
      this.fileTypeData = val
    }
  },
  data() {
    let res = []
    this.supportTypes.forEach(item => {
      if (supportTypesData[item]) {
        res.push(supportTypesData[item])
      }
    })
    return {
      disabled:false,
      supportTypesArr: res,
      fileList: [],
      uploading: false,
      fileType: [],
      fileAddress: [],
      fieldNames:  { label: 'name', value: 'oid', children: 'childs' },
      fileAddressData: [],
      fileTypeData: '',
      treeData: [],
      primaryColor: this.$store.state.commonData.primaryColor
    }
  },
  mounted() {
    if(this.paramsVisible) {
      if (!this.oid) {
        this.$message.error('oid不能为空')
      } else {
        getSubTypes({
          objType: 'wt.doc.WTDocument'
        }).then(({data}) => {
          if (data.success) {
            this.fileType = data.data
          } else {
            this.$message.info(data.message || '文件类型获取失败')
          }
        })
        //
        let parmasData = { userId: userinfo.loginName, oid: 'OR:com.pisx.pmgt.project.PIProject:' + this.oid}
        getFolderTree(parmasData).then(({data}) => {
          if (data.success) {
            if (!data.data[0] || !data.data[0].childs.length) {
              this.$message.info('暂无文件存放位置数据')
            } else {
              this.treeData = data.data
              this.initTreeData(this.treeData)
              this.fileAddress = this.treeData[0].childs
            }
          } else {
            this.$message.info(data.message || '文件存放位置获取失败')
          }
        })
      }
    }
  },
  methods: {
    beforeUpload(file) {
      console.log(file)
      if (!this.supportTypesArr.includes(file.type)) {
        console.log(this.supportTypesArr)
        this.$message.error(`请上传${this.supportTypes.join(' ')}类型的文件`)
        return Promise.reject(`请上传${this.supportTypes.join(' ')}类型的文件`)
      }
      this.$emit('handleUpload', file)
      if (this.multiple) {
        this.fileList = [...this.fileList, file];
      } else {
        this.fileList = [file]
      }
      return false;
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      console.log(file,'---',this.fileList)
      this.$emit('handleRemove', file, this.fileList)
    },
    initTreeData (data) {
      data.forEach(item => {
        if (item.childs && item.childs.length !== 0) {
          this.initTreeData(item.childs)
        } else {
          delete item.childs
          return
        }
      })
    },
    // handleUpload(file) {
    //   if (!this.action) {
    //     this.$message.error('上传地址不能为空')
    //   } else {
    //     console.log(this.fileList)
    //     // console.log(this.params)
    //     // let params = new FormData()
    //     // for(let key in this.params) {
    //     //   params.append(key, this.params[key])
    //     // }
    //     // params.append(this.fileKey, file.file)
    //     // uploadCommon(this.action, params).then(({data}) => {
    //     //   if (data.success === "true") {
    //     //     this.$message.success(data.message)
    //     //     file.onSuccess(data, file)
    //     //   } else {
    //     //     this.$message.error(data.message)
    //     //     file.onError(data, file)
    //     //   }
    //     // }).catch(error => {
    //     //   this.$message.error(error)
    //     //   console.log(error)
    //     // })
    //     // let progress = { percent: 1 }
    //     // let speed = 100/(file.file.size/2000)
    //     // let intervalId = setInterval(() => {
    //     //   if (progress.percent < 99 && progress.percent + speed < 100) {
    //     //     progress.percent += speed
    //     //     file.onProgress(progress)
    //     //   } else if(progress.percent === 99) {
    //     //     progress.percent ++
    //     //   } else if (progress.percent === 100) {
    //     //     clearInterval(intervalId)
    //     //   }
    //     // })
    //     this.$emit('handleUpload', this.fileList)
    //   }
    // },
    handleChange() {
      // this.$emit('selectFileType', this.fileType[info])
      console.log(this.fileTypeData)
      this.$emit('selectFileType', this.fileTypeData)
    },
    fileAddressOnChange(info) {
      this.$emit('selectFileAddress', info)
    },
    upLoadHandleChange() {},
    /*cancel() {
      this.$emit('cancel')
    },*/
    ok() {
      this.$emit('ok')
    },
    cancel () {
      this.fileTypeData = ''
      this.fileList = []
    }
  }
}
</script>
<style lang="less" scoped>
  .common-upload{
    .content_row{
      display: flex;
      align-items: center;
      & {
        margin-bottom: 16px;
      }
      .content-name{
        min-width: 100px;
      }
    }
    .box-btn{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      /deep/ .ant-btn{
        margin-left: 15px;
      }
    }
    /deep/ .ant-upload-drag{
      height: 193.7px;
      margin-bottom: 10px;
      .ant-upload-text{
        font-size: 14px;
        color: #666666;
        line-height: 22px;
      }
      .ant-upload-hint{
        font-size: 12px;
        color: #999999;
        line-height: 20px;
        text-align: center;
        padding:0 15%;
      }
    }
  }
  /deep/ .my-dialog .ant-modal-body{
    padding: 20px 15px;
  }
</style>